<template>
	<view class="my-store-info">
		<view class="head-plate">
			<u-cell-group>
				<u-cell title="接收人"><u--input slot="value" placeholder="请输入接收人手机号" v-model="transfer.descUserName" type="number"
						border="none" clearable></u--input></u-cell>
				<u-cell title="确认接收人"><u--input slot="value" placeholder="请输入接收人手机号" v-model="descUserName" type="number"
						border="none" clearable></u--input></u-cell>
			</u-cell-group>
		</view>
		<view class="nav-plate">
			<view class="nav-plate-left">
				<view class="nav-item" v-for="(item,index) in navList" :key="index" :class="{'active':cur==index}"
					@click="tabNav(index)">{{item.text}}</view>
			</view>
			<view class="nav-plate-right" @click="openSearch">设备筛选<u-icon name="search"></u-icon></view>
		</view>
		<view class="list">
			<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
				<view class="li-item" v-for="(item,index) in equipList" :key="index">
					<u-checkbox  :key="index"  :name="JSON.stringify(item)">
					</u-checkbox>
					<view class="device-info">
						<view class="li-item-model">
							{{item.deviceName}}
						</view>
						<view class="li-item-model">
							设备编号：{{item.deviceNumber}}
						</view>
					</view>
					


				</view>
			</u-checkbox-group>
		</view>
		<u-loadmore :status="status" />
		<view class="footer">
			<view class="f-left"><view class="word">已选择</view><view class="word">喇叭{{hornNumber}}台，盒子机{{machineNumber}}台</view></view>
			<view class="f-right" @click="sure">确定</view>
		</view>
		<u-popup :show="showPass" @close="close" @open="open" mode="center" :round="10">
		            <view class="passBox">
						<view class="paytitle">请输入支付密码</view>
		               <u-code-input v-model="transfer.payPassword" :maxlength="6" mode="box" dot></u-code-input>
					   <view class="pay-btn" @click="payTransfer">确定</view>
		            </view>
				</u-popup>
				<u-popup :show="showSearch" @close="closeSearch" @open="openSearch" mode="right">
					<view class="search-model">
						<view class="model">
							<view class="model-title">
								品牌
							</view>
							<view class="model-list">
								<view class="dd" v-for="(item,index) in brandList" :class="{'brand-cur':brandCur==index}" @click="selectBrand(item,index)">
								    {{item.name}}
								</view>
				
							</view>
						</view>
						<view class="model">
							<view class="model-list">
								<u--input
								    placeholder="请输入设备编号"
								   
								    v-model="searchModel.deviceNumber"
								   
								  ></u--input>
				
							</view>
						</view>
					
						<view class="sure-search" @click="searchList">确定</view>
					</view>
				</u-popup>
	</view>
</template>

<script>
	const app = getApp();
	const globalData = app.globalData;
	const apiUrl = globalData.wxApi;
	const wxImg = globalData.wxImg;
	import {
		getStoreData,
		dealNum,
		httpPost,
		httpGet,
		bdMapToTxMap,
		txMapToBdMap,
	} from "@/utils/http.js";
	import mpMixin from "@/uni_modules/uview-ui/libs/mixin/mpMixin";
	const pic1 = require(`@/img/my/my1.png`);



	export default {
		data() {
			return {
				wxImg,
				apiUrl,
				dealNum,
				pic1,
				value: "",
				userInfo: {},
				indexList: [],
				navList: [{
					text: "喇叭"
				}, {
					text: "盒子机"
				}],
				cur: 0,
				hornNum: 0,
				BoxNum: 0,
				equipTotalNum: 0,
				searchModel: {
					deviceModel:null,
					deviceNumber:"",
					deviceType:null,
					pageNo:1,
					pageSize:10
				},
				equipList: [],
				status: "loadmore",
				pageTotal: 1,
				descUserName: "",
				checkboxValue1: [],
				showPass:false,
				payPassword:"",
				transfer:{
					descUserName:"",
					iotIds:[],
					pageNo:1,
					pageSize:10,
					payPassword:""
				},
				hornNumber:0,
				machineNumber:0,
				count:0,
				showSearch:false,
				type:1,
				brandList:[],
				brandCur:null

			};
		},

		onShow() {

		},
		onUnload() {

		},
		onLoad(options) {
             this.getBrandList();
			this.getEquipList();
		},
		onPullDownRefresh() {

			this.cur = 0;
			this.searchModel.deviceType = 1;
			this.equipList = [];
			this.searchModel.pageNo = 1;
			this.count=0;
			this.getEquipList();
		},
		onReachBottom() {
			if (this.count >=10) {
				this.status = 'loading';
				this.searchModel.pageNo++
				this.getEquipList();
			} else {
				this.status = 'nomore'
			}

		},
		methods: {
           getBrandList(){
           	let that = this;
           	httpGet("/api/iotmerchantsdevice/deviceModelList/"+this.type)
           		.then((res) => {
           			uni.stopPullDownRefresh();
           			if (res.code == 0) {
           			  that.brandList=res.data;
           			}
           		})
           		.catch((e) => {});
           },
			tabNav(index) {
				this.cur = index;
				if (index == 0) {
					this.searchModel.deviceType = 1;
					this.type=1;
				}
				if (index == 1) {
					this.searchModel.deviceType = 2;
					this.type=2;
				}
				this.equipList = [];
				this.searchModel.pageNo = 1;
				this.count=0;
				this.getEquipList();
				this.getBrandList();
			},
			getEquipList() {
				let that = this;
				httpPost("/api/iotmerchantsdevice/tradeDeviceList", this.searchModel)
					.then((res) => {
						console.log(res)
						uni.stopPullDownRefresh();
						if (res.code == 0) {
							this.equipList = [...res.data.list, ...this.equipList];
							this.count=res.data.list.length;
					        if(this.count>=10){
						        this.status = 'loading';
					           }else{
						       this.status = 'nomore';
					          }
							
						}
					})
					.catch((e) => {});
			},
			checkboxChange(e) {
              console.log(e)
			  let arr=[],arr2=[];
			  let name_1=[],name_2=[];
			  for(let i=0;i<e.length;i++){
				  arr.push(JSON.parse(e[i]));
				 
			  }
			  for(let j=0;j<arr.length;j++){
				  if(arr[j].deviceType==1){//喇叭
					  name_1.push(arr[j]);
				  }
				 if(arr[j].deviceType==2){//盒子机
				    name_2.push(arr[j]);
				 }
				arr2.push(arr[j].iotId);
			  }
			  this.transfer.iotIds=arr2;
			  this.hornNumber=name_1.length;
			  this.machineNumber=name_2.length;
			  console.log(arr,name_1,name_2)
			},
			sure(){
				let that = this;
				let pattern = /^1[3456789]\d{9}$/;
				 
				if(that.transfer.descUserName==""){
					uni.showToast({
						icon: "none",
						title: "请输入接收人手机号"
					});
					return;
				}
				if(!pattern.test(that.transfer.descUserName)){
					uni.showToast({
						icon: "none",
						title: "请输入正确格式的手机号"
					});
					return;
				}
				if(that.transfer.descUserName!=""&&that.transfer.descUserName!=that.descUserName){
					uni.showToast({
						icon: "none",
						title: "两次手机号不一致"
					});
					return;
				}
				if(that.transfer.iotIds.length==0){
					uni.showToast({
						icon: "none",
						title: "请选择转让的设备"
					});
					return;
				}
				this.showPass=true;
				
			},
			close(){
				this.showPass=false;
			},
			open(){
				this.showPass=true;
			},
			payTransfer(){
				let that = this;
				
				if(!that.transfer.payPassword){
					uni.showToast({
						icon: "none",
						title: "请输入支付密码"
					});
					return;
				}
				httpPost("/api/iotmerchantsdevice/tradeDevice", that.transfer)
					.then((res) => {
						console.log(res)
					})
					.catch((e) => {});
			},
			openSearch(){
				this.showSearch=true;
			},
			closeSearch(){
				this.showSearch=false;
			},
			searchList(){
				this.getEquipList();
				this.showSearch=false;
			},
			selectBrand(data,index){
				this.brandCur=index;
				this.searchModel.deviceModel=data.id;
			}


		},
	};
</script>

<style lang="scss">
	.my-store-info {
		background-color: #f5f6f6;
		height: 100vh;
	}


	/deep/ .u-cell__title-text {
		font-size: 28rpx;
	}

	.head-plate {
		background: #fff;
		padding-top: 30rpx;
		padding-bottom: 30rpx;

		.head-plate-into {
			margin-left: 30rpx;
			margin-right: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 30rpx;

			.option-btn-box {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.btn-p {
					padding: 10rpx 20rpx;
					color: #fff;
					font-size: 24rpx;
					border-radius: 10rpx;
				}

				.btn-p:nth-child(1) {
					background-color: #fe6906;
				}

				.btn-p:nth-child(2) {
					background-color: #2adae9;
				}

				.btn-p:nth-child(3) {
					background-color: #20ae48;
				}
			}
		}

		.my-equip {
			.my-text {
				font-size: 32rpx;
				text-align: center;
			}

			.my-number {
				font-size: 70rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				margin-top: 10rpx;
				margin-bottom: 10rpx;

				.tag {
					font-size: 32rpx;
					padding-top: 36rpx;
				}
			}
		}

		.equip-number {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			font-size: 28rpx;
			border-top: 2rpx solid #eee;
			margin-top: 20rpx;
			padding-top: 20rpx;

			.equip-number-item {
				margin-right: 40rpx;
			}
		}
	}

	.nav-plate {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;

		.nav-plate-left {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;

			.nav-item {
				padding-bottom: 6rpx;
				border-bottom: 4rpx solid #fff;
				margin-right: 20rpx;
			}

			.active {
				border-bottom: 4rpx solid #329ffc;
				color: #329ffc;
			}
		}

		.nav-plate-right {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;

		}
	}

	.list {
		padding-left: 30rpx;
		padding-right: 30rpx;

		.li-item {
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-bottom: 2rpx solid #eee;
			background-color: #fff;
			border-radius: 10rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
            .device-info{
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
			}
			.Active {
				text-align: right;
				line-height: 60rpx;
			}

			.li-item-model {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				margin-left: 20rpx;

				.name {
					font-size:24rpx;
					
				}

				.label {
					color: #ababab;
				}

				.no-activation {
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
				}

				.item-child {
					

					.btn-active {
						width: 90rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						border-radius: 10rpx;
						background-color: #52bff8;
						color: #fff;
						font-size: 24rpx;
					}
				}
			}

			
		}
	}
	.footer{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 690rpx;
		position: fixed;
		bottom: 0;
		padding: 20rpx 30rpx;
		background-color: #fff;
		.f-left{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			.word{
				margin-left: 20rpx;
				line-height: 60rpx;
			}
			.word:nth-child(2){
				font-weight: bold;
			}
		}
		.f-right{
			width: 120rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			background-color: #4cbcfb;
			color: #fff;
			border-radius: 10rpx;
		}
	}
	.passBox{
		
		padding: 100rpx 40rpx;
		.paytitle{
			font-size: 30rpx;
			text-align: center;
			margin-bottom: 40rpx;
		}
		.pay-btn{
			width: 100%;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			background-color: #4cbcfb;
			border-radius: 10rpx;
			color: #fff;
			margin-top: 40rpx;
		}
	}
	.search-model{
		padding: 40rpx 30rpx;
		width: 400rpx;
		.sure-search{
			height: 50rpx;
			line-height: 50rpx;
			background-color: #329ffc;
			color: #fff;
			text-align: center;
			border-radius: 10rpx;
			
		}
		.model{
			margin-bottom: 20rpx;
			.model-title{
				font-size: 28rpx;
				margin-bottom: 10rpx;
			}
			.model-list{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				flex-wrap: wrap;
				.dd{
					padding: 8rpx 15rpx;
					border: #ababab 2rpx solid;
					margin-left: 20rpx;
					font-size: 24rpx;
					border-radius: 10rpx;
					margin-bottom: 10rpx;
				}
				.active-cur{
					background-color: #fe6906;
					color: #fff;
					border: #fe6906 2rpx solid;
				}
				.bind-cur{
					background-color: #fe6906;
					color: #fff;
					border: #fe6906 2rpx solid;
				}
				.brand-cur{
					background-color: #fe6906;
					color: #fff;
					border: #fe6906 2rpx solid;
				}
			}
		}
	}
</style>